


import { memo, forwardRef, useImperativeHandle, useEffect, useState, useRef } from 'react'
import { uid } from "uid";
import { useNavigate } from 'react-router-dom'
import { Button, Form, message, Input, Select } from 'antd'
import bus from '../../../../../utils/eventBus'
import LdDialog from '../../../../../components/LdDialog'
import './index.scss'
const BurnDialog = forwardRef((props: any, ref: any) => {
    const { row, refresh, close, title = "刻录机设备" } = props
    const [loading, setLoading] = useState<boolean>(false)
    const [template, setTemplate] = useState<any>({
        okFileName: "",
        failFileName: '',
        failFile: '',
        okFile: ''
    })
    const formRef = useRef<any>(null)
    const [globalLoading, setGlobalLoading] = useState<boolean>(false)
    const status = useRef<number>(0)
    const navigate = useNavigate()
    const handleSave = () => {
        formRef.current.validateFields().then((res: any) => {
            const params = { ...res,...template }
            setLoading(true)
            if (!row) return window.chromePro.addNetBurnerInfo(JSON.stringify(params))
            window.chromePro.modNetBurnerInfo(JSON.stringify(params))
        }).catch((err:any)=>{
            
        })
    }
    const handleCoverUpload = (type: number) => {
        status.current = type
        setGlobalLoading(true)
        window.chromePro.importNetBurnerCover();
    }
    const importNetBurnerCoverFinished = (res: any) => {
        if (res.code === 200) {
            status.current ? setTemplate({ ...template, okFile: res.file }) : setTemplate({ ...template, failFile: res.file })
            status.current ? setTemplate({ ...template, okFileName: res.fileName }) : setTemplate({ ...template, failFileName: res.fileName })
            message.success(res.msg)
        } else if (res.code === -1) {
            message.info(res.msg)
        } else {
            message.error(res.msg)
        }
        setGlobalLoading(false)
    }
    const addNetBurnerInfoFinished = (res: any) => {
        if (res.code === 200) {
            message.success(res.msg)
            setTimeout(() => {
                close && close()
                refresh && refresh()
            }, 2000)
            return
        }
        message.error(res.msg)
        setLoading(false)
    }
    const modNetBurnerInfoFinished = (res: any) => {
        if (res.code === 200) {
            message.success(res.msg)
            setTimeout(() => {
                close && close()
                refresh && refresh()
            }, 2000)
            return
        }
        message.error(res.msg)
        setLoading(false)
    }
    const handleShowTemplate = () => {
        navigate('/layout/template')
    }
    useEffect(() => {
        bus.addListener('importNetBurnerCoverFinished', importNetBurnerCoverFinished)
        bus.addListener('addNetBurnerInfoFinished', addNetBurnerInfoFinished)
        bus.addListener('modNetBurnerInfoFinished', modNetBurnerInfoFinished)
        if (!row) {
            formRef.current.setFieldsValue({
                id: uid(32)
            })
        } else {
            formRef.current.setFieldsValue({
                ...row
            })
        }
    }, [])
    useEffect(() => {
        return () => {
            bus.removeListener('importNetBurnerCoverFinished', importNetBurnerCoverFinished)
            bus.removeListener('addNetBurnerInfoFinished', addNetBurnerInfoFinished)
            bus.removeListener('modNetBurnerInfoFinished', modNetBurnerInfoFinished)
        }
    }, [])
    return (
        <>
            <LdDialog open={true} handleClose={close} title={title}>
                <div>
                    <Form labelCol={{ span: 8 }} ref={formRef} style={{ width: '80%', margin: '0px auto' }}>
                        <Form.Item label="刻录机名称" name="name" rules={[{ required: true, message: '请输入刻录机名称' }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item label="刻录机IP" name="ip" rules={[{ required: true, message: '请输入刻录机IP' }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item label="刻录机端口" name="port" rules={[{ required: true, message: '请输入刻录机端口' }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item label="刻录机成功模板">
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                {
                                    template.okFileName ?
                                        <span className="file-box" style={{ margin: '0 5px' }}
                                            title={template.okFileName}>
                                            <i className="el-icon-success" style={{ color: "green" }}></i>
                                            {template.okFileName}
                                        </span> : null
                                }
                                <Button className="el-button-text" type="link" onClick={() => handleCoverUpload(1)}>{template.okFileName
                                    ?
                                    '点击重新上传封面' : '点击上传封面'}</Button>
                            </div>
                        </Form.Item>
                        <Form.Item label="刻录机失败模板">
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                {
                                    template.failFileName ?
                                        <span className="file-box" style={{ margin: '0 5px' }}
                                            title={template.failFileName}>
                                            <i className="el-icon-success" style={{ color: 'green' }}></i>
                                            {template.failFileName}
                                        </span> : null
                                }
                                <Button className="el-button-text" type="link" onClick={() => handleCoverUpload(0)}>{
                                    template.failFileName ?
                                        '点击重新上传封面' : '点击上传封面'}</Button>
                            </div>
                        </Form.Item>
                    </Form>
                    <div className="footer">
                        <Button type="primary" loading={loading} onClick={handleSave} className="footer-btn">保存上报</Button>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                        <Button className="template" type="link" onClick={handleShowTemplate}>如何配置模板？</Button>
                    </div>
                </div>
            </LdDialog >
        </>
    )
})
export default memo(BurnDialog)